<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!--IE Compatibility modes-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!--Mobile first-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>403</title>

    <meta name="description" content="Free Admin Template Based On Twitter Bootstrap 3.x">
    <meta name="author" content="">

    <meta name="msapplication-TileColor" content="#5bc0de"/>
    <meta name="msapplication-TileImage" content="assets/img/metis-tile.png"/>

    <!-- Bootstrap -->
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- Font Awesome -->
    <!--<link rel="stylesheet" href="assets/lib/font-awesome/css/font-awesome.min.css">-->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-table/bootstrap-table.min.css">
    <link rel="stylesheet" href="/assets/lib/bootstrap-switch/css/bootstrap3/bootstrap-switch.min.css">
    <!-- Metis core stylesheet -->
    <link rel="stylesheet" href="/assets/css/main.css">
    <!-- animate.css stylesheet -->
    <link rel="stylesheet" href="/assets/lib/animate.css/animate.css"/>
    <link rel="stylesheet" href="/assets/lib/select2/css/select2.min.css"/>
    <link rel="stylesheet" href="/assets/lib/bootstrap-validator/css/bootstrapValidator.min.css"/>
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="//oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="//oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <style>
        .text_info {
            border: 0px;
        }
    </style>
    <!--<style>
        #add_form,#add_form_store,#update_form,#update_form_store,input {
            height: 24px;
            width: 535px;
            font-size: 20px;
        }
        #add_form,#add_form_store,#update_form,#update_form_store,table {
            font-family: '微软雅黑', '宋体', '黑体';
        }
        #add_form,#add_form_store,#update_form,#update_form_store,td {
            background-color: rgb(249,252,255);
            height: 24px;
            width: 535px;
        }
        #add_form,#add_form_store,#update_form,#update_form_store,td:hover {
            background-color: rgb(168,213,252);
            cursor: default;
        }
    </style>-->

    <![endif]-->
</head>

<body>
<div class="bg-dark dk" id="wrap" style="height:50px;">
    <header class="head">
        <div class="">
            <ol class="breadcrumb" style="background-color: #3a3a3a">
                <li><a href="#"> <i class="fa fa-home">系统管理</i></a></li>
                <li class="active">首页轮播管理</li>
            </ol>
        </div>
        <!-- /.main-bar -->
    </header>
</div>
<div class="container" style="width:100%;">
    <div class="row">
        <div class="col-lg-12">
            <div class="box dark">
                <header>
                    <div class="icons"><i class="fa fa-th-large"></i></div>
                    <h5>查询</h5>
                    <!-- .toolbar -->
                    <div class="toolbar">
                        <nav style="padding: 8px;">
                        </nav>
                    </div>            <!-- /.toolbar -->
                </header>
                <div id="div-1" class="body">
                    <form id="validVal" class="form-inline">
                        <div class="form-group">
                            <label for="activityName">活动名称&nbsp;</label>
                            <input type="text" name="activityName" class="form-control" id="activityName"
                                   placeholder="请输入活动名称">
                        </div>
                        <div class="form-group">
                            <label for="storeName">店铺名称&nbsp;</label>
                            <input type="text" name="storeName" class="form-control" id="storeName"
                                   placeholder="请输入店铺名">
                        </div>

                        <div class="form-group">
                            <label for="status">启用状态&nbsp;</label>
                            <select name="status" id="status" class="form-control">
                                <option>请选择</option>
                                <option value="0">未启用</option>
                                <option value="1">启用中</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="status">类型&nbsp;</label>
                            <select name="type" id="type" class="form-control">
                                <option>请选择</option>
                                <option value="h5">H5</option>
                                <option value="店铺">店铺</option>
                            </select>
                        </div>
                        <button type="button" class="btn btn-success search_button">提交</button>

                    </form>
                </div>
            </div>
        </div>

        <!--END TEXT INPUT FIELD-->
    </div>
    <div class="row">
        <div class="col-lg-12">
            <div class="box">
                <div id="collapse4" class="body">

                    <div id="toolbar" style="margin-bottom: 5px;">
                        <div class="btn-group">
                            <button type="button" data-toggle="modal" data-target="#add_modal" class="btn btn-default">
                                <i class="fa fa-plus"></i>&nbsp;新增
                            </button>
                        </div>
                    </div>

                    <table id="dataTable" class="table table-bordered table-condensed table-hover table-striped">
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <!-- /.col-lg-8 col-offset-2 -->
    <!--------------------------添加轮播的弹出层---------------------------->
    <div id="add_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="static"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h5 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span data-type="add" style="font-weight:bold">添加轮播</span>
                    </h5>
                </div>

                <ul id="myTab" class="nav nav-pills">
                    <li class="active">
                        <a href="#home" data-toggle="tab">H5</a>
                    </li>
                    <li><a href="#ios" data-toggle="tab">店铺</a></li>
                </ul>
                <div id="myTabContent" class="tab-content">
                    <div class="tab-pane fade in active" id="home">
                        <form class="form-horizontal form-bordered form-row-strippe" id="add_form" action=""
                              data-toggle="validator" enctype="multipart/form-data">
                            <div class="modal-body">
                                <input name="id" type="hidden" value=""/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动名</label>
                                            <div class="col-md-10">
                                                <input name="activityName" type="text" class="form-control"
                                                       placeholder="活动名..."/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动地址</label>
                                            <div class="col-md-10">
                                                <input name="activityUrl" type="text" class="form-control"
                                                       placeholder="URL..."/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动图片</label>
                                            <div class="col-md-10">
                                                <div id="preview">
                                                    <img id="imghead" border="0" src="/ico/photo_icon.png" width="90"
                                                         height="90" onclick="$('#previewImg').click();">
                                                </div>
                                                <input type="file" onchange="previewImage(this)" style="display: none;"
                                                       id="previewImg" name="file">
                                                <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                                            </div>
                                            <!--<div class="col-4"><span class="Validform_checktip"></span></div>-->
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">状态</label>
                                            <div class="col-md-10">
                                                <select class="form-control" name="status">
                                                    <option value="1">启用</option>
                                                    <option value="0">禁用</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer bg-info">
                                <button type="submit" id="add_button" class="btn blue">确定</button>
                                <button type="button" class="btn green" data-dismiss="modal">取消</button>
                            </div>
                            <div class="alert alert-danger error_div" style="text-align: center;display: none;">
                                <strong>错误!</strong><span></span>
                            </div>
                        </form>


                    </div>
                    <div class="tab-pane fade" id="ios">

                        <form class="form-horizontal form-bordered form-row-strippe" id="add_form_store" action=""
                              data-toggle="validator" enctype="multipart/form-data">
                            <div class="modal-body">
                                <input name="id" type="hidden" value=""/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">店铺</label>
                                            <div class="col-md-10">
                                                <input type='text' id='txt' name="storeName" class="form-control"
                                                       placeholder="关键字搜索..."/>
                                                <table id="search_table" cellpadding='2' cellspacing='0'>
                                                    <tbody>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">宣传图片</label>
                                            <div class="col-md-10">
                                                <div id="previewS">
                                                    <img id="imgheadS" border="0" src="/ico/photo_icon.png" width="90"
                                                         height="90" onclick="$('#previewImgS').click();">
                                                </div>
                                                <input type="file" onchange="previewImageS(this)" style="display: none;"
                                                       id="previewImgS" name="file">
                                                <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                                            </div>
                                            <!--<div class="col-4"><span class="Validform_checktip"></span></div>-->
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">状态</label>
                                            <div class="col-md-10">
                                                <select class="form-control" name="status">
                                                    <option value="1">启用</option>
                                                    <option value="0">禁用</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer bg-info">
                                <button type="submit" id="add_button_store" class="btn blue">确定</button>
                                <button type="button" class="btn green" data-dismiss="modal">取消</button>
                            </div>
                            <div class="alert alert-danger error_div" style="text-align: center;display: none;">
                                <strong>错误!</strong><span></span>
                            </div>
                        </form>

                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- /modal -->

    <!--------------------------修改轮播的弹出层---------------------------->
    <div id="update_modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         data-backdrop="static"
         aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>


                    <h5 class="modal-title">
                        <i class="icon-pencil"></i>
                        <span id="lblAddTitle" data-type="add" style="font-weight:bold">修改轮播</span>
                    </h5>
                </div>


                <ul id="myTab1" class="nav nav-pills">
                    <li class="active">
                        <a href="#home1" data-toggle="tab">H5</a>
                    </li>
                    <li><a href="#ios1" data-toggle="tab">店铺</a></li>
                </ul>
                <div id="myTabContent1" class="tab-content">
                    <div class="tab-pane fade in active" id="home1">
                        <form class="form-horizontal form-bordered form-row-strippe" id="update_form" action=""
                              data-toggle="validator" enctype="multipart/form-data">
                            <input name="id" type="hidden" value=""/>
                            <div class="modal-body">
                                <input name="id" type="hidden" value=""/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动名</label>
                                            <div class="col-md-10">
                                                <input name="activityName" type="text" class="form-control"
                                                       placeholder="活动名..."/>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动地址</label>
                                            <div class="col-md-10">
                                                <input name="activityUrl" type="text" class="form-control"
                                                       placeholder="URL..."/>
                                            </div>
                                        </div>
                                    </div>

                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">活动图片</label>
                                            <div class="col-md-10">
                                                <div id="previewE">
                                                    <img id="imgheadE" border="0" src="/ico/photo_icon.png" width="90"
                                                         height="90" onclick="$('#previewImgE').click();">
                                                </div>
                                                <input type="file" onchange="previewImageE(this)" style="display: none;"
                                                       id="previewImgE" name="file">
                                                <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                                            </div>
                                            <!--<div class="col-4"><span class="Validform_checktip"></span></div>-->
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">状态</label>
                                            <div class="col-md-10">
                                                <select class="form-control" name="status">
                                                    <option value="1">启用</option>
                                                    <option value="0">禁用</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer bg-info">
                                <button type="submit" id="update_button" class="btn blue">确定</button>
                                <button type="button" class="btn green" data-dismiss="modal">取消</button>
                            </div>
                            <div class="alert alert-danger error_div" style="text-align: center;display: none;">
                                <strong>错误!</strong><span></span>
                            </div>
                        </form>
                    </div>
                    <div class="tab-pane fade" id="ios1">
                        <form class="form-horizontal form-bordered form-row-strippe" id="update_form_store" action=""
                              data-toggle="validator" enctype="multipart/form-data">
                            <div class="modal-body">
                                <input name="id" type="hidden" value=""/>
                                <div class="row">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">店铺</label>
                                            <div class="col-md-10">
                                                <input type='text' id='txt1' name="storeName" class="form-control"
                                                       placeholder="关键字搜索..."/>
                                                <table id="search_table1" cellpadding='2' cellspacing='0'>
                                                    <tbody>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    <tr>
                                                        <td></td>
                                                    </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">宣传图片</label>
                                            <div class="col-md-10">
                                                <div id="previewS1">
                                                    <img id="imgheadS1" border="0" src="/ico/photo_icon.png" width="90"
                                                         height="90" onclick="$('#previewImgS1').click();">
                                                </div>
                                                <input type="file" onchange="previewImageS1(this)"
                                                       style="display: none;"
                                                       id="previewImgS1" name="file">
                                                <!--<input id="uploaderInput" class="uploader__input" style="display: none;" type="file" accept="" multiple="">-->
                                            </div>
                                            <!--<div class="col-4"><span class="Validform_checktip"></span></div>-->
                                        </div>
                                    </div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="control-label col-md-2">状态</label>
                                            <div class="col-md-10">
                                                <select class="form-control" name="status">
                                                    <option value="1">启用</option>
                                                    <option value="0">禁用</option>
                                                </select>
                                            </div>
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <div class="modal-footer bg-info">
                                <button type="submit" id="update_button_store" class="btn blue">确定</button>
                                <button type="button" class="btn green" data-dismiss="modal">取消</button>
                            </div>
                            <div class="alert alert-danger error_div" style="text-align: center;display: none;">
                                <strong>错误!</strong><span></span>
                            </div>
                        </form>

                    </div>
                </div>


            </div>
        </div>
    </div>
    <!-- /modal -->


    <!-- 模态框（Modal） -->

    <div class="modal fade" id="ShowImage_Form" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
         aria-hidden="true">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                </div>
                <div class="modal-body">
                    <div id="img_show">
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

</div>
<!--jQuery -->
<script src="/assets/lib/jquery/jquery.min.js"></script>
<!--Bootstrap -->
<script src="/assets/lib/bootstrap/js/bootstrap.min.js"></script>
<script src="/assets/lib/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/assets/lib/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="/assets/lib/bootstrap-switch/js/bootstrap-switch.min.js"></script>
<script src="/assets/lib/select2/js/select2.min.js"></script>
<script src="/assets/lib/bootstrap-validator/js/bootstrapValidator.min.js"></script>
<!-- MetisMenu -->
<script src="/assets/lib/metismenu/metisMenu.js"></script>
<!-- Metis core scripts -->
<script src="/assets/js/core.js"></script>
<script src="/assets/js/distpicker.data.js"></script>
<script src="/assets/js/distpicker.js"></script>
<script src="/assets/js/utils.js"></script>
<!-- Metis demo scripts -->
<script src="/assets/js/app.js"></script>
<script src="/assets/lib/layer/layer.js"></script>
<script>
    var csrf_token = "${_csrf.token}";
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': csrf_token
        }
    });
    layer.config({
        extend: 'extend/layer.ext.js'
    });
    //下拉搜索
    var EventUtil = {
        addHandler: function (element, type, handler) {
            if (element.addEventListener) {  // DOM2
                element.addEventListener(type, handler, false);
            } else if (element.attachEvent) {  // IE
                element.attachEvent('on' + type, handler);
            } else {  // DOM0
                element['on' + type] = handler;
            }
        },
        removeHandler: function (element, type, handler) {
            if (element.removeEventListener) {
                element.removeEventListener(type, handler, false);
            } else if (element.detachEvent) {
                element.detachEvent('on' + type, handler);
            } else {
                element['on' + type] = null;
            }
        }
    };
    String.prototype.trim = function () {
        return this.replace(/^\s*|\s*$/g, '');
    };


    function hideTds(val) {
        var tds = $(val + ' td');
        for (var i = 0; i < 10; i++) {
            tds[i].style.display = 'none';
        }
    }
    hideTds('#search_table');
    hideTds('#search_table1');

    EventUtil.addHandler(document.getElementById('txt'), 'keyup', function () {
        var tds = $('#search_table td');
        for (var i = 0; i < 10; i++) {
            tds[i].innerHTML = '';
        }
        hideTds('#search_table');
        if (document.getElementById('txt').value.trim() === '') {
            return;
        }

        var dataArr = new Array();
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/sysu/findStore?merchantName=" + document.getElementById('txt').value.trim(),
            async: false,
            success: function (res) {
                if (res.status == 'y') {
                    //查询成功
                    dataArr = res.data;
                }
            },
            error: function (xhr, errorType, error) {
            },
            complete: function () {
            }
        });
        var nameArr = new Array();
        if (dataArr.length == 0) {
            nameArr.push("无结果!")
        }
        dataArr.forEach(function (value, index, array) {
            nameArr.push(value.id + "|" + value.merchantName);
        });
        fn({q: document.getElementById('txt').value.trim(), p: false, s: nameArr}, 'txt', '#search_table');
    });
    EventUtil.addHandler(document.getElementById('txt1'), 'keyup', function () {
        var tds = $('#search_table1 td');
        for (var i = 0; i < 10; i++) {
            tds[i].innerHTML = '';
        }
        hideTds('#search_table1');
        if (document.getElementById('txt1').value.trim() === '') {
            return;
        }

        var dataArr = new Array();
        $.ajax({
            type: "GET",
            dataType: "json",
            url: "/sysu/findStore?merchantName=" + document.getElementById('txt1').value.trim(),
            async: false,
            success: function (res) {
                if (res.status == 'y') {
                    //查询成功
                    dataArr = res.data;
                }
            },
            error: function (xhr, errorType, error) {
            },
            complete: function () {
            }
        });
        var nameArr = new Array();
        if (dataArr.length == 0) {
            nameArr.push("无结果!")
        }
        dataArr.forEach(function (value, index, array) {
            nameArr.push(value.id + "|" + value.merchantName);
        });
        fn({q: document.getElementById('txt1').value.trim(), p: false, s: nameArr}, 'txt1', '#search_table1');
    });
    function fn(data, id, val) {
        var tds = $(val + ' td');
        for (var i = 0, len = data.s.length; i < len; i++) {
            tds[i].style.display = '';
            var item = data.s[i]
                , val = document.getElementById(id).value.trim();
            tds[i].innerHTML = item;
        }
        // delete scripts
        // var s = document.querySelectorAll('script');
        // var s = document.getElementsByTagName('script');
        // for (var i = 2, len = s.length; i < len; i++) {
        //   document.body.removeChild(s[i]);
        // }
    }
    EventUtil.addHandler($('#search_table tbody')[0], 'click', function (e) {
        var wd
            , e = e ? e : window.e
            , target = e.target || e.srcElement;
        wd = target.innerHTML;
        //window.open('https://www.baidu.com/s?word=' + encodeURIComponent(wd));
        //点击后操作
        $('#txt').val([wd]).trigger('change');
        hideTds('#search_table');
    });
    EventUtil.addHandler($('#search_table1 tbody')[0], 'click', function (e) {
        var wd
            , e = e ? e : window.e
            , target = e.target || e.srcElement;
        wd = target.innerHTML;
        //window.open('https://www.baidu.com/s?word=' + encodeURIComponent(wd));
        //点击后操作
        $('#txt1').val([wd]).trigger('change');
        hideTds('#search_table1');
    });

    /*
     EventUtil.addHandler(document, 'click', function(e) {
     var e = e ? e : window.e
     ,target = e.target || e.srcElement;
     if (target === document.documentElement || target === document.body) {
     hideTds();
     }
     });*/


    $(document).ready(function () {


        $("#distpicker2").distpicker({
            province: "---- 所在省 ----",
            city: "---- 所在市 ----",
            district: "---- 所在区 ----"
        });
        $("#distpicker2").distpicker('reset', true);

        $('#add_modal,#update_modal').on('hide.bs.modal', function () {
            console.log("触发start");

            $(this).find(".error_div").hide();

            console.log("触发end");
        });


        $('#add_modal').on('show.bs.modal', function (e) {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/sys/get/roles",
                beforeSend: function () {
                },
                success: function (res) {
                    if (res.status) {
                        layer.msg("获取角色失败", {icon: 7});
                    } else {
                        $(e.target).find(".role_select").select2({
                            width: "100%",
                            tags: true,
                            maximumSelectionLength: 3,
                            data: res,
                            placeholder: "请选择角色"
                        });

                    }
                },
                error: function (xhr, errorType, error) {
                    layer.msg("获取角色失败", {icon: 7});
                },
                complete: function () {
                }
            });
        });
        initTable();

        $(document).on("click", ".search_button", function () {
            $('#dataTable').bootstrapTable('refresh');
        });

        $("#add_form").bootstrapValidator(
            {
                message: 'This value is not valid',
                submitButtons: 'button[type="submit"]',
                live: 'enabled',
                feedbackIcons: {
                    valid: 'glyphicon glyphicon-ok',
                    invalid: 'glyphicon glyphicon-remove',
                    validating: 'glyphicon glyphicon-refresh'
                },
                fields: {
                    activityName: {
                        validators: {
                            notEmpty: {
                                message: "活动名不为空"
                            },
                            stringLength: {
                                max: 15,
                                message: "活动名不大于15字符"
                            }
                        }
                    },
                    activityUrl: {
                        validators: {
                            notEmpty: {
                                message: "活动地址不为空"
                            }
                        }
                    }
                }
            }
        ).on('success.form.bv', function (e) {
            // Prevent form submission
            e.preventDefault();
            // Get the form instance
            var $form = $(e.target);
            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');
            // Use Ajax to submit form data 提交至form标签中的action，result自定义
            var index = layer.load(1);
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "/sysm/carousel/add",
                data: new FormData($form[0]),
                processData: false,
                contentType: false,
                success: function (res) {
                    layer.close(index);
                    if (res.status == "y") {
                        $("#add_modal").modal("hide");
                        $("table").bootstrapTable('refresh');
                        layer.msg("添加成功!", {icon: 6});
                    } else {
                        showError($form, res.info);
                    }
                },
                error: function (xhr, errorType, error) {
                    layer.close(index);
                    showError($form, error);
                },
                complete: function () {
                    layer.close(index);
                }
            });
            $("#add_button").removeAttr("disabled");
        });
    });


    $("#add_form_store").bootstrapValidator(
        {
            message: 'This value is not valid',
            submitButtons: 'button[type="submit"]',
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                storeName: {
                    validators: {
                        notEmpty: {
                            message: "店铺不能为空"
                        }
                    }
                }
            }
        }
    ).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var $form = $(e.target);
        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        // Use Ajax to submit form data 提交至form标签中的action，result自定义
        var index = layer.load(1);
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/sysm/carousel/addStore",
            data: new FormData($form[0]),
            processData: false,
            contentType: false,
            success: function (res) {
                layer.close(index);
                if (res.status == "y") {
                    $("#add_modal").modal("hide");
                    $("table").bootstrapTable('refresh');
                    layer.msg("添加成功!", {icon: 6});
                } else {
                    showError($form, res.info);
                }
            },
            error: function (xhr, errorType, error) {
                layer.close(index);
                showError($form, error);
            },
            complete: function () {
                layer.close(index);
            }
        });
        $("#add_button_store").removeAttr("disabled");
    });


    $("#update_form").bootstrapValidator(
        {
            message: 'This value is not valid',
            submitButtons: 'button[type="submit"]',
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                activityName: {
                    validators: {
                        notEmpty: {
                            message: "活动名不为空"
                        },
                        stringLength: {
                            max: 15,
                            message: "活动名不大于15字符"
                        }
                    }
                },
                activityUrl: {
                    validators: {
                        notEmpty: {
                            message: "活动地址不为空"
                        }
                    }
                }

            }
        }
    ).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var $form = $(e.target);
        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        // Use Ajax to submit form data 提交至form标签中的action，result自定义
        var index = layer.load(1);
        console.log("h5修改");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/sysm/carousel/edit",
            data: new FormData($form[0]),
            processData: false,
            contentType: false,
            success: function (res) {
                layer.close(index);

                if (res.status == "y") {
                    $("#update_modal").modal("hide");
                    $("table").bootstrapTable('refresh');
                    layer.msg("修改成功!", {icon: 6});
                } else {
                    showError($form, res.info);
                }
            },
            error: function (xhr, errorType, error) {
                layer.close(index);
                showError($form, error);
            },
            complete: function () {
                layer.close(index);
            }
        });
    });


    $("#update_form_store").bootstrapValidator(
        {
            message: 'This value is not valid',
            submitButtons: 'button[type="submit"]',
            live: 'enabled',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                storeName: {
                    validators: {
                        notEmpty: {
                            message: "店铺不能为空"
                        }
                    }
                }
            }
        }
    ).on('success.form.bv', function (e) {
        // Prevent form submission
        e.preventDefault();
        // Get the form instance
        var $form = $(e.target);
        // Get the BootstrapValidator instance
        var bv = $form.data('bootstrapValidator');
        // Use Ajax to submit form data 提交至form标签中的action，result自定义
        var index = layer.load(1);
        console.log("店铺修改");
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "/sysm/carousel/editStore",
            data: new FormData($form[0]),
            processData: false,
            contentType: false,
            success: function (res) {
                layer.close(index);
                if (res.status == "y") {
                    $("#update_modal").modal("hide");
                    $("table").bootstrapTable('refresh');
                    layer.msg("编辑成功!", {icon: 6});
                } else {
                    showError($form, res.info);
                }
            },
            error: function (xhr, errorType, error) {
                layer.close(index);
                showError($form, error);
            },
            complete: function () {
                layer.close(index);
            }
        });
        $("#update_button_store").removeAttr("disabled");
    });

    function showError(obj, error) {
        obj.find(".error_div").find("span").text(error);
        obj.find(".error_div").show();
    }
    //获取轮播数据
    function initTable() {
        var url = "/sysm/getCarousel";
        $('#dataTable').bootstrapTable({
            method: 'GET',
            dataType: 'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                      //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url: url,
            sortable: true,
            sortName: "createTime",
            sortOrder: 'desc',
            showColumns: false,
            pagination: true,
            queryParams: queryParams,
            minimumCountColumns: 2,
            pageNumber: 1,                       //初始化加载第一页，默认第一页
            pageSize: 10,                        //每页的记录行数（*）
            pageList: [10, 25, 50, 100],         //可供选择的每页的行数（*）
            uniqueId: "id",                      //每一行的唯一标识，一般为主键列
            showExport: true,
            exportDataType: 'all',
            responseHandler: responseHandler,
            columns: [
                {
                    field: 'id',
                    title: '序列号',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        var pageSize = $('#dataTable').bootstrapTable('getOptions').pageSize;//通过表的#id 可以得到每页多少条
                        var pageNumber = $('#dataTable').bootstrapTable('getOptions').pageNumber;//通过表的#id 可以得到当前第几页
						//return pageSize * (pageNumber - 1) + index + 1;
						//返回每条的序号： 每页条数 * （当前页 - 1 ）+ 序号
                        return "<span data-id='" + value + "'>" + (pageSize * (pageNumber - 1) + index + 1) + "</span>";
                    }
                },
                {
                    field: 'type',
                    title: '类型',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'storeName',
                    title: '店铺',
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: 'activityName',
                    title: '活动名',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'activityPicture',
                    title: '宣传照片',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return "<img  src=" + value + " width='72' height='72' alt='' class='img-rounded' onclick='showimage(\"" + value + "\");'/>";
                    }
                },
                {
                    field: 'activityUrl',
                    title: '活动地址',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'status',
                    title: '启用状态',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        if (value == 0) {
                            return "<span style='color: red'>未启用</span>";
                        } else if (value == 1) {
                            return "<span style='color: green'>启用中</span>";
                        } else {
                            return "<span style='color: blue'>未知状态</span>";
                        }
                    }
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        return new Date(value).format('yyyy-MM-dd hh:mm:ss');
                    }
                }, {
                    field: '',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index) {
                        var strHtml = "";
                        if (row.status == 0) {
                            strHtml = '<a title="启用"  href="javascript:void(0);"  class="btn btn-xs btn-success carousel-pass" ><i class="fa fa-check bigger-120"></i></a>';
                        } else {
                            strHtml = '&nbsp;<a  href="javascript:;" title="禁用" class="btn btn-xs btn-danger carousel-refuse"><i class="fa fa-close  bigger-120"></i></a>';
                        }
                        strHtml += '&nbsp;<a  href="javascript:;" title="编辑" class="btn btn-xs btn-info carousel-edit"><i class="fa fa-edit  bigger-120"></i></a>';
                        strHtml += '&nbsp;<a  href="javascript:;" title="删除" class="btn btn-xs btn-danger carousel-delete"><i class="fa fa-trash-o  bigger-120"></i></a>';
                        return strHtml;
                    }
                }],
            onPostBody: function () {
                $(".make-switch").bootstrapSwitch({
                    onSwitchChange: function (event, state) {
                        var userId = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
                        $.ajax({
                            type: "POST",
                            dataType: "json",
                            url: "/sys/enable/user",
                            data: {
                                userId: userId,
                                enabled: state
                            },
                            beforeSend: function () {
                            },
                            success: function (res) {
                                if (res.status != "y") {
                                    layer.msg("操作失败", {icon: 7});
                                    $("table").bootstrapSwitch('state', !state, true);
                                }
                            },
                            error: function (xhr, errorType, error) {
                                layer.msg("操作失败", {icon: 7});
                                $(event.target).bootstrapSwitch('state', !state, true);
                            },
                            complete: function () {
                            }
                        });
                    }
                });
            }
        });

        $(document).on("click", ".carousel-refuse", function (event) {
            var id = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
            layer.confirm('确定要禁用该条轮播吗?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sysm/carousel/refuse",
                    async: false,
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res.status != "y") {
                            layer.msg("操作失败", {icon: 7});

                        } else {
                            $("table").bootstrapTable('refresh');
                            layer.msg("禁用成功", {icon: 6});
                        }
                    },
                    error: function (xhr, errorType, error) {
                        layer.msg("操作失败", {icon: 7});
                    }
                });
            });

        });

        $(document).on("click", ".carousel-delete", function (event) {
            var id = $(event.target).closest("tr").find("td:first").find("span").attr("data-id");
            layer.confirm('确定要删除该条轮播吗?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sysm/carousel/delete",
                    async: false,
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res.status != "y") {
                            layer.msg("操作失败", {icon: 7});

                        } else {
                            $("table").bootstrapTable('refresh');
                            layer.msg("删除成功", {icon: 6});
                        }
                    },
                    error: function (xhr, errorType, error) {
                        layer.msg("操作失败", {icon: 7});
                    }
                });
            });

        });


        $(document).on("click", ".carousel-pass", function (e) {
            var id = $(e.target).closest("tr").find("td:first").find("span").attr("data-id");

            layer.confirm('确定启用该条轮播吗?', {icon: 3, title: '提示'}, function (index) {
                $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "/sysm/carousel/pass",
                    async: false,
                    data: {
                        id: id
                    },
                    success: function (res) {
                        if (res.status != "y") {
                            layer.msg("操作失败", {icon: 7});

                        } else {
                            $("table").bootstrapTable('refresh');
                            layer.msg("启用成功", {icon: 6});
                        }
                    },
                    error: function (xhr, errorType, error) {
                        layer.msg("操作失败", {icon: 7});
                    }
                });
            });
        });


        $(document).on("click", ".carousel-edit", function (e) {
            var id = $(e.target).closest("tr").find("td:first").find("span").attr("data-id");
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "/sysm/carousel/getDetail",
                data: {
                    id: id
                },
                success: function (res) {
                    if (res.status != "y") {
                        layer.msg(res.info, {icon: 7});

                    } else {
                        if (res.data.detail.type == 'h5') {
                            var $form = $("#update_modal").find("#update_form");
                            var detail = res.data.detail;

                            $("#imgheadE")[0].style.width = "90px";
                            $("#imgheadE")[0].style.height = "90px";
                            $("#imgheadE")[0].style["margin-top"] = "0px";

                            $("#update_button").removeAttr("disabled");

                            $($form).find("[name='status']").val(detail.status);

                            $($form).find("#imgheadE")[0].src = detail.activityPicture;
                            $("#update_form_store").find("#imgheadS1")[0].src = '/ico/photo_icon.png';

                            $form.find("input,select").each(function () {
                                var name = $(this).attr("name");
                                switch (name) {
                                    case "id":
                                        $(this).val(detail.id);
                                        break;
                                    case "activityName":
                                        $(this).val(detail.activityName);
                                        break;
                                    case "activityUrl":
                                        $(this).val(detail.activityUrl);
                                        break;
                                }
                            });
                            $("#update_modal").find("#update_form_store").find("input,select").each(function () {
                                var name = $(this).attr("name");
                                switch (name) {
                                    case "id":
                                        $(this).val(detail.id);
                                        break;
                                }
                            });

                           // $('#update_form_store')[0].reset();
                            $('#myTab1 a:first').tab('show');

                        } else {
                            var $form = $("#update_modal").find("#update_form_store");
                            var detail = res.data.detail;

                            $("#imgheadS1")[0].style.width = "90px";
                            $("#imgheadS1")[0].style.height = "90px";
                            $("#imgheadS1")[0].style["margin-top"] = "0px";

                            $("#update_button_store").removeAttr("disabled");

                            $($form).find("[name='status']").val(detail.status);

                            $($form).find("#imgheadS1")[0].src = detail.activityPicture;
                            $("#update_form").find("#imgheadE")[0].src = '/ico/photo_icon.png';

                            $form.find("input,select").each(function () {
                                var name = $(this).attr("name");
                                switch (name) {
                                    case "id":
                                        $(this).val(detail.id);
                                        break;
                                    case "storeName":
                                        $(this).val(detail.goodsPicture + "|" + detail.storeName);
                                        break;
                                }
                            });
                            $("#update_modal").find("#update_form").find("input,select").each(function () {
                                var name = $(this).attr("name");
                                switch (name) {
                                    case "id":
                                        $(this).val(detail.id);
                                        break;
                                }
                            });
                            //$('#update_form')[0].reset();
                            $('#myTab1 a:last').tab('show');
                        }

                        $("#update_modal").modal("show");

                    }
                },
                error: function (xhr, errorType, error) {
                    layer.msg("操作失败", {icon: 7});
                }
            });
        });

    }

    function showimage(source) {
        $("#ShowImage_Form").find("#img_show").html("<image src=" + source + " class='carousel-inner img-responsive img-rounded' />");
        $("#ShowImage_Form").modal();
    }


    function queryParams(params) {
        var param = {
            pageNumber: this.pageNumber,
            pageSize: this.pageSize,
            activityName: $("form").find("[name='activityName']").val(),
            storeName: $("form").find("[name='storeName']").val(),
        };
        if ($('#status option:selected').text().indexOf("请选择") == -1) {
            param.status = $('#status option:selected').val();
        }
        if ($('#type option:selected').text().indexOf("请选择") == -1) {
            param.type = $('#type option:selected').val();
        }
        return param;
    }

    // 用于server 分页，表格数据量太大的话 不想一次查询所有数据，可以使用server分页查询，数据量小的话可以直接把sidePagination: "server"  改为 sidePagination: "client" ，同时去掉responseHandler: responseHandler就可以了，
    function responseHandler(res) {

        if (res) {
            return {
                "rows": res.result,
                "total": res.totalCount
            };
        } else {
            return {
                "rows": [],
                "total": 0
            };
        }
    }
    $.fn.modal.Constructor.prototype.enforceFocus = function () {
    };
    Date.prototype.format = function (fmt) { //author: meizz
        var o = {
            "M+": this.getMonth() + 1, //月份
            "d+": this.getDate(), //日
            "h+": this.getHours(), //小时
            "m+": this.getMinutes(), //分
            "s+": this.getSeconds(), //秒
            "q+": Math.floor((this.getMonth() + 3) / 3), //季度
            "S": this.getMilliseconds() //毫秒
        };
        if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }
</script>
</body>

</html>
